@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-gradient-to-r from-slate-200 to-sky-100;
}

.button {
  @apply rounded bg-orange-300 px-6 py-3 text-center font-bold text-gray-700 transition duration-150 hover:bg-orange-200;
}
.button.gray {
  @apply bg-slate-200 text-slate-600;
}
.button.yellow {
  @apply bg-yellow-400 text-yellow-900;
}
.button.light-blue {
  @apply bg-sky-200 text-sky-600 hover:bg-sky-100;
}
.button.amber {
  @apply bg-amber-400 text-slate-900 hover:bg-amber-300;
}
.button.sm {
  @apply px-4 py-2 text-sm;
}
.button.xs {
  @apply px-2 py-1 text-xs;
}
.button:disabled {
  @apply pointer-events-none cursor-not-allowed opacity-50;
}
input,
textarea {
  @apply relative w-full rounded-lg bg-white py-3 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-sky-300;
}

input[type="text"],
textarea {
  appearance: none;
  -webkit-appearance: none;
}

.big-box {
  @apply rounded-xl bg-slate-50 p-8 text-slate-800;
}

.big-box-dark {
  @apply rounded-xl bg-slate-800 p-8 text-slate-100;
}

.status-icon {
  @apply flex h-[27px] w-[27px] items-center justify-center rounded-full;
}

.creativity-conventional {
  @apply text-purple-600;
}
.creativity-creative {
  @apply text-orange-600;
}
